<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta name="layout" content="main_customer_pc"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="/scfire/css_pc/index.css" />
    <script type="text/javascript" src="/scfire/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/scfire/js/util.js"></script>
    <title>火堆</title>
</head>

<body>
    <section class="">
	<div class="in-lb-bg">
           <ul>
           <g:each in="${posters}" var="poster" status="i">
           <g:if test="${i == 0}">
               <li class="active" style="background-image:url('/scfire/project/imgRead?img=${poster.img}')" ></li> 
           </g:if>
           <g:else>
               <li style="background-image:url('/scfire/project/imgRead?img=${poster.img}')" ></li> 
           </g:else>
           </g:each>
           </ul>
        </div>
        <div class="board-wrap fix-header" >
            <div class="in-lb-navi">
                <div class="container">
                    <ul>
                       <g:each in="${posters}" var="poster" status="i">
			           <g:if test="${i == 0}">
			               <li class="active" ></li> 
			           </g:if>
			           <g:else>
			               <li></li> 
			           </g:else>
			           </g:each>
                    </ul>
                </div>
            </div>

            <div class="board">
                <div class="in-lb-ani in-lb-title">
                    <ul>
                       <g:each in="${posters}" var="poster" status="i">
			           <g:if test="${i == 0}">
			               <li class="active" >
			               <div class="container">
                                <div class="title">
                                    <div class="bg style1"></div>
                                    <div class="bg style2"></div>
                                    <div class="txt">${poster.title}</div>
                                </div>
                            </div>
			               </li> 
			           </g:if>
			           <g:else>
			               <li>
			               <div class="container">
                                <div class="title">
                                    <div class="bg style1"></div>
                                    <div class="bg style2"></div>
                                    <div class="txt">${poster.title}</div>
                                </div>
                            </div>
			               </li> 
			           </g:else>
			           </g:each>
                    </ul>
                </div>
                <div class="body">
                    <div class="container">
                        <div class="left">
                            <div class="txt  in-lb-ani in-lb-txt">
                                <ul>
			                       <g:each in="${posters}" var="poster" status="i">
						           <g:if test="${i == 0}">
						               <li class="active" >${poster.description}</li> 
						           </g:if>
						           <g:else>
						               <li>${poster.description}</li> 
						           </g:else>
						           </g:each>
			                    </ul>
                            </div>
                            <div class="btn o">发现更多公益项目</div>
                            <img src="/scfire/img_pc/qrcode_1.png">
                        </div>
                        <div class="right">
                            <div class="txt">作为一名关注教育的人士
                                <br> 我希望让孩子们体验更好的教育
                                <br> 我希望成为教育公益事业的发起人
                                <br>
                            </div>
                            <div class="btn w">我要发起项目</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</section>
	<script>
        var inScroll = null;
        var links = new Array();
        <g:each in="${posters}" var="poster" status="i">
         links[${i}] = '${poster.url}';
        </g:each>
        $(function(){
        	//点击区域的links事件绑定
            $('div.in-lb-title').click(function (){
            	window.location.href=links[0];
            });
            
            $('.in-lb-navi ul > li').click(function(){
                if ($(this).hasClass('active')) {
                    return;
                }
                var index = $(this).index();


              	//点击区域的links事件绑定
                $('div.in-lb-title').click(function (){
                	window.location.href=links[index];
                });
                
                $(this).addClass('active').siblings().removeClass('active');
                $('.in-lb-ani').each(function(){
                    $(this).find('ul > li').eq(index).addClass('active').siblings().removeClass('active');
                })

                var prev = $('.in-lb-bg ul > li.active');
                prev.css({
                    left : 'auto',
                    right : '0%'
                });
                setTimeout(function(){
                    prev.animate({
                        left : 'auto',
                        right : '100%'
                    }, 2000);
                }, 200);

                var cur = $('.in-lb-bg ul > li').eq(index);
                cur.css({
                    left : '100%',
                });
                setTimeout(function(){
                    cur.animate({
                        left : '0%',
                    }, 1200)
                }, 200);

                prev.removeClass('active')
                cur.addClass('active')
            })

            inScroll = setInterval(function(){
                triggerScroll()
            }, 4500)
            $('.in-lb-navi ul > li').hover(function(){
                clearInterval(inScroll)
            }, function(){
                inScroll = setInterval(function(){
                    triggerScroll()
                }, 4500)
            });
        })

        function triggerScroll () {
            var index = ($('.in-lb-navi ul > li.active').index() + 1) % $('.in-lb-navi ul > li').length;

            console.log(index);
            $('.in-lb-navi ul > li').eq(index).click();

        }
    </script>
</body>

</html>
